<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <!-- 左边 -->
    <div class="left">
      <div class="put">
        <el-input placeholder="请输入机器人名称" v-model="robot_name" @change="getRobotName($event)"
                  prefix-icon="el-icon-search" clearable></el-input>
      </div>
      <div class="table">
        <el-table :data="robotList" @row-click="handleSelectionChange" height="100%"
              :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
              :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
              :row-style="{ height: '40px', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
              :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
          <el-table-column prop="robot_num" label="编号" width="90px" />
          <el-table-column prop="robot_name" label="名称" />
          <el-table-column prop="robot_state" label="状态" width="60px">
            <template slot-scope="scope">
              <i class="el-icon-error" v-if="scope.row.robot_state === 0"
                 style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
              <i class="el-icon-success" v-if="scope.row.robot_state === 1"
                 style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
    <!-- 中间 -->
    <div class="video-center">
      <div>
        <p id="robotitle" style="font-size:18px;color: #e7e7ea;letter-spacing:1px;"></p>
      </div>
      <div class="center-box1">
        <!-- 转速盘 -->
        <div class="Speed-dial">
          <div id="gauges" ref="gauges"></div>
        </div>
        <div class="right-mode">
          <div class="right-mode2">
            <p>电压</p>
            <p style="color: #bddafc;">{{ dcdy }}</p>
          </div>
          <div class="right-mode1">
            <p>充电状态</p>
            <p style="color: #bddafc;">{{ cdzt }}</p>
          </div>
          <div class="right-mode3">
            <p>电量</p>
            <p style="color: #bddafc;">{{ dcdl }}</p>
          </div>
          <div class="right-mode4">
            <p>位移</p>
            <p style="color: #bddafc;">{{ actualPosition }}</p>
          </div>
        </div>

      </div>
      <!-- 手动模式 -->
      <div class="center-box2-1">
        <div class="right-bottomBox">
          <div class="rightbox1">
            <p contenteditable="true" id="mbwzid" style="
            width: 80px;
            height: 28px;
            line-height: 28px;
            background: #011137 !important;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            color: #bddafc;
            text-align: center;
            align-items: center;
            justify-content: center;
            -webkit-box-align: center;
            ">1</p>
            <span>点</span>
            <el-button class="btn1" @click="xjdF()" size="default">目标位置</el-button>
          </div>
          <div class="rightbox2">
            <el-dropdown @command="sdlb">
              <el-button type="primary" size="min" style="width: 80px;
                height: 30px;background: #0F1A43 !important;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border: 2px solid #54619D;
                border-radius: 10px;
                font-size: 12px;
                font-family: Bahnschrift;
                font-weight: 400;
                color: #bddafc;">
                {{ sd }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">0</el-dropdown-item>
                <el-dropdown-item command="240">240</el-dropdown-item>
                <el-dropdown-item command="480">480</el-dropdown-item>
                <el-dropdown-item command="720">720</el-dropdown-item>
                <el-dropdown-item command="960">960</el-dropdown-item>
                <el-dropdown-item command="1200">1200</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>r/min</span>
            <el-button class="btn2" @click="yxsdF()" size="default">运行速度</el-button>
          </div>
        </div>
        <div class="rightbox3">
          <div class="rightbox3-1">
            <el-button class="btn1" size="default" @click="rwzx()">启动</el-button>
            <el-button class="btn2" size="default" @click="rwtz()">停止</el-button>
            <el-button class="btn4" size="default" @click="zxfh()">返航</el-button>
<!--            <el-button class="btn3" size="default" @click="stop()">停止</el-button>-->
          </div>
        </div>
      </div>

    </div>
    <!-- 右边 -->
    <div class="video-right">
      <div>
        <p style="font-size:18px;color: #e7e7ea;letter-spacing:1px;">视频控制</p>
      </div>
      <!-- 海康摄像头 -->
      <div class="videoBox">
        <div class="videobox1">
          <!-- 监控画面 -->
          <div class="box" :class="{ active: activeBox === 1 }" @click=" activeBox = 1;">
            <video v-show="videoShowQ" id="HKvideo" style="width:100%;height:99%" class="video-js" controls
                   autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                   controlslist="nodownload"></video>
          </div>
          <div class="box" :class="{ active: activeBox === 2 }" @click=" activeBox = 2;">
            <video v-show="videoShowH" id="HKvideo1" class="video-js" style="width:100%;height:99%" controls
                   autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                   controlslist="nodownload"></video>
          </div>
        </div>
        <div class="videobox2">
          <div class="videobox2-1">
            <p>音视频</p>
            <span></span>
          </div>
          <div class="videobox2-2">
            <div class="videobox2-2-1">
              <el-button class="btn" size="mini" @click="HKtiming">摄像头校时</el-button>
              <p contenteditable="true" id="sy"></p>
            </div>

            <div class="videobox2-2-3">
<!--              <el-button class="btn3" size="default" v-if="this.online !='' && this.online != -1">在线</el-button>-->
<!--              <el-button class="btn1" size="default" v-else-if="this.online == -1 || this.online ==''">离线</el-button>-->
              <el-button class="btn1" size="default" v-show="lxShow">离线</el-button>
              <el-button class="btn3" size="default" v-show="zxShow">在线</el-button>
              <el-button class="btn2" size="default" @click="HKwatermark">摄像头水印</el-button>
            </div>
<!--            <div class="videobox2-2-4">-->
<!--              <el-button class="btn1" size="mini" @click="HKstartVideo">摄像头开始录</el-button>-->
<!--              <el-button class="btn2" size="mini" @click="HKendVideo">摄像头停止录</el-button>-->
<!--            </div>-->
          </div>
        </div>
        <div class="videobox3">
          <div class="videobox3-1">
            <p>云台</p>
            <span></span>
          </div>
          <div class="videobox3-2">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="HKpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startUp" @mousedown="startUp1"
                       @mouseup="stopUp1">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startUpRight" @mousedown="startUpRight1"
                       @mouseup="stopUpRight1">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startRight" @mousedown="startRight1"
                       @mouseup="stopRight1">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startDownRight"
                       @mousedown="startDownRight1" @mouseup="stopDownRight1">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startUpLeft" @mousedown="startUpLeft1"
                       @mouseup="stopUpLeft1">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startLeft" @mousedown="startLeft1"
                       @mouseup="stopLeft1">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startDownLeft"
                       @mousedown="startDownLeft1" @mouseup="stopDownLeft1">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startDown" @mousedown="startDown1"
                       @mouseup="stopDown1">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="startBBminus" @mousedown="startBBminus1" @mouseup="stopBBminus1"><i
                  class="el-icon-minus"></i></p>
                <p>变倍</p>
                <p class="btn2" @click="startBBplus" @mousedown="startBBplus1" @mouseup="stopBBplus1"><i
                  class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startBJminus" @mousedown="startBJminus1" @mouseup="stopBJminus1"><i
                  class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2" @click="startBJplus" @mousedown="startBJplus1" @mouseup="stopBJplus1"><i
                  class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startGQminus" @mousedown="startGQminus1" @mouseup="stopGQminus1"><i
                  class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2" @click="startGQplus" @mousedown="startGQplus1" @mouseup="stopGQplus1"><i
                  class="el-icon-plus"></i></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import * as echarts from "echarts";
  import $ from "jquery";
  import {
    jqrdataCmd,
    jqrsdCmd,
    xjdCmd,
    listonPageRobotConfig,
    acktaskCmd,
    stoptaskCmd,
    backtaskCmd,
    stopCmd
  } from "@/api/ptwn/robotcontrol/robotcontrol";
  import {
    HKendVideo,
    HKfocusAdd,
    HKfocusAdd1,
    HKfocusAddEnd1,
    HKfocusDec,
    HKfocusDec1,
    HKfocusDecEnd1,
    HKirisAdd,
    HKirisAdd1,
    HKirisAddEnd1,
    HKirisDec,
    HKirisDec1,
    HKirisDecEnd1,
    HKonline,
    HKpicture,
    HKptzDown,
    HKptzDown1,
    HKptzDownEnd1,
    HKptzLeft,
    HKptzLeft1,
    HKptzLeftDown,
    HKptzLeftDown1,
    HKptzLeftDownEnd1,
    HKptzLeftEnd1,
    HKptzLeftUp,
    HKptzLeftUp1,
    HKptzLeftUpEnd1,
    HKptzRight,
    HKptzRight1,
    HKptzRightDown,
    HKptzRightDown1,
    HKptzRightDownEnd1,
    HKptzRightEnd1,
    HKptzRightUp,
    HKptzRightUp1,
    HKptzRightUpEnd1,
    HKptzUp,
    HKptzUp1,
    HKptzUpEnd1,
    HKstartVideo,
    HKtiming,
    HKwatermark,
    HKzoomAdd,
    HKzoomAdd1,
    HKzoomAddEnd1,
    HKzoomDec,
    HKzoomDec1,
    HKzoomDecEnd1
  } from "@/api/ptwn/hkvideo/video";
  import { ippingCmd } from "@/api/ptwn/home/home";
  let myChart = null;
  export default {
    data() {
      return {
        //机器人列表
        robotList: [],
        //控制机器人的滚动条
        isDologin: false,
        robot_name: undefined,//机器人名称
        sd: '480', //机器人速度
        arrive: '无', //是否到达目的地位置
        actualPosition: '无',//机器人当前位置
        destinationPosition:'无',//机器人目的地位置
        actualVelocity: '无', //机器人当前运行速度
        cdzt:"无",//充电状态
        dcdy:"无",//电池电压
        dcdl:"无",//电池电量
        //摄像头服务
        webRtcServer: null,
        webRtcServer1: null,
        //是否展示视频
        videoShowQ: false,
        videoShowH: false,
        //判断展示在线或离线
        zxShow: false,
        lxShow: true,
        activeBox: 1,  //标识被选中
        //定时器
        timer: null,
        timer1: null,
        queryParams:{
          robot_name: undefined //机器人名称
        },queryParams1:{
          robot_config_id: undefined
        },queryparms2:{
          robotid: undefined,
        },// 查询参数
        queryparms3: {
          robotid: undefined,
          valu: undefined,
          robot_ip: undefined,
          robot_port: undefined,
          video_ip1: undefined,
          video_name1: undefined,
          video_pwd1: undefined,
          video_port1: undefined,
        },//摄像头参数
        queryparms4: {
          valu: undefined,
          video_ip1: localStorage.getItem("video_ip1"),
          video_name1: localStorage.getItem("video_name1"),
          video_pwd1: localStorage.getItem("video_pwd1"),
          video_port1: localStorage.getItem("video_port1"),
          robot_config_id: localStorage.getItem("robot_config_id"),
        },//在线或离线
        online: '',
      }
    },
    created() {
      this.getList();//机器人列表
      this.initcharts(0);//运行速度（步数）
    },
    mounted() {
      //加载完页面加载方法
      $("#robotitle").text(localStorage.getItem("robot_name") == null ? "机器人": localStorage.getItem("robot_name"));//机器人标题
      //定时器轮询程序
      this.timer1 = setInterval(() => {
        this.getList();//机器人列表
        this.readata();//机器人数据
        console.log("机器人控制页面定时器")
      }, 2000);//2秒
      this.spbf(); //挂在完成后播放当前的监控视频,摄像头播放
      this.HKonlines(); //摄像头在线离线状态
    },
    methods: {
      spbf() {
        if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
          ippingCmd(localStorage.getItem("video_ip1")).then(response => {
            if (typeof (response) != null && response.data != null && response.data == true) {
              this.webRtcServer = new WebRtcStreamer('HKvideo', location.protocol + '//127.0.0.1:8000')
              this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/h264/ch1/main/av_stream')
              this.webRtcServer1 = new WebRtcStreamer('HKvideo1', location.protocol + '//127.0.0.1:8000')
              this.webRtcServer1.connect('rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/h264/ch2/main/av_stream')
              this.videoShowQ = true
              this.videoShowH = true
            }else{
              console.log("22222222222"+this.webRtcServer)
              console.log("33333333333"+this.webRtcServer1)
              this.videoShowQ = false
              this.videoShowH = false
              console.log("摄像头ip:"+localStorage.getItem("video_ip1")+" ping不通")
            }
          });
        }else{
          this.videoShowQ = false
          this.videoShowH = false
          console.log("摄像头ip:"+localStorage.getItem("video_ip1")+"为空！")
        }
      },
      //根据输入框机器人名称，查询机器人列表
      getRobotName(robot_name) {
        this.queryParams.robot_name = robot_name;
        this.getList();
      },
      //获取当前机器人数据
      handleSelectionChange(row) {
        //摄像头相关
        if (this.webRtcServer != null) {
          this.webRtcServer.disconnect();
          this.webRtcServer = null
        }
        //摄像头相关
        if (this.webRtcServer1 != null) {
          this.webRtcServer1.disconnect();
          this.webRtcServer1 = null
        }
         localStorage.removeItem("robot_config_id");//删除机器人id
         localStorage.removeItem("robot_name");//删除机器人名称
         localStorage.removeItem("video_ip1");//删除1摄像头ip
         localStorage.removeItem("video_port1");//删除1摄像头端口
         localStorage.removeItem("video_name1");//删除1摄像头账号
         localStorage.removeItem("video_pwd1");//删除1摄像头密码

         localStorage.setItem("video_ip1", row.video_ip1);//存储值
         localStorage.setItem("video_port1", row.video_port1);//存储值
         localStorage.setItem("video_name1", row.video_name1);//存储值
         localStorage.setItem("video_pwd1", row.video_pwd1);//存储值
         localStorage.setItem("robot_name", row.robot_name);//存储值
         localStorage.setItem("robot_config_id", row.id);//存储值
         //摄像头参数
         this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
         this.queryparms4.video_name1 = localStorage.getItem("video_name1");
         this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
         this.queryparms4.video_port1 = localStorage.getItem("video_port1");
         this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
         //机器人名称标题
         $("#robotitle").text(localStorage.getItem("robot_name"));
        this.spbf();//摄像头视频播放
        this.HKonlines(); //摄像头状态
      },
      //查询机器人列表
      getList() {
        this.loading = true;
        listonPageRobotConfig(this.queryParams).then(response => {
          this.robotList = response.rows;
          this.loading = false;
        });
      },//当前机器人数据
      readata() {
        this.queryparms2.robotid = localStorage.getItem("robot_config_id");
        jqrdataCmd(this.queryparms2).then(response => {
          if (typeof response.data != "undefined" && response.data != null) {
            this.actualVelocity = response.data.actualVelocity==null||response.data.actualVelocity==""||response.data.actualVelocity=="null"?0:response.data.actualVelocity; //机器人当前运行速度
            this.arrive = response.data.arrive||response.data.arrive==""||response.data.arrive=="null"?"无":response.data.arrive; //是否到达目的地位置
            this.actualPosition = response.data.actualPosition==null||response.data.actualPosition==""||response.data.actualPosition=="null"?"无":response.data.actualPosition; //机器人当前位置
            this.destinationPosition = response.data.destinationPosition==null||response.data.destinationPosition==""||response.data.destinationPosition=="null"?"无":response.data.destinationPosition; //机器人目的地位置
            this.cdzt = response.data.cdzt==null||response.data.cdzt==""||response.data.cdzt=="null"?"无":response.data.cdzt; //充电状态
            this.dcdy = response.data.dcdy==null||response.data.dcdy==""||response.data.dcdy=="null"?0:response.data.dcdy+"V"; //电池电压
            this.dcdl = response.data.dcdl==null||response.data.dcdl==""||response.data.dcdl=="null"?0:response.data.dcdl+"%"; //电池电量
            this.initcharts(response.data.actualVelocity==null||response.data.actualVelocity==""||response.data.actualVelocity=="null"?0:response.data.actualVelocity);//机器人当前位置（运行步数）
          } else {
            this.actualVelocity = "无"; //机器人当前运行速度
            this.arrive = "无"; //是否到达目的地位置
            this.actualPosition = "无"; //机器人当前位置
            this.destinationPosition = "无"; //机器人目的地位置
            this.cdzt = "无"; //充电状态
            this.dcdy = "无"; //电池电压
            this.dcdl = "无"; //电池电量
            this.initcharts(0);//机器人当前位置（运行步数）
          }
        });
      },//停止
      stop() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        stopCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//任务执行
      rwzx() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        acktaskCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//任务停止
      rwtz() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        stoptaskCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//执行返回
      zxfh() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        backtaskCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }, sdlb(sd) {
        this.sd = sd; // 速度列表
      },//速度设置
      yxsdF() {
        this.queryparms3.valu = this.sd;
        console.log("手动模式速度设置" + this.sd);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          jqrsdCmd(this.queryparms3).then(response => {
            if (typeof (response) != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("手动模式速度设置不能为空")
        }
      },//巡检点设置
      xjdF() {
        this.queryparms3.valu = $("#mbwzid").text();
        console.log("巡检点" + this.queryparms3.valu);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          xjdCmd(this.queryparms3).then(response => {
            if (typeof (response) != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("目标位置不能为空")
        }
      },//电机转速
      initcharts(actualVelocity) {
         setTimeout(() => {
            myChart = echarts.init(document.getElementById("gauges"));
            myChart.setOption(
                {
                  series: [
                    {
                      radius: "100%",
                      center: ['52%', '55%'],
                      type: 'gauge',
                      axisLine: {
                        lineStyle: {
                          width: 24,
                          color: [
                            [0.3, '#3e78f5'],
                            [0.7, '#9a54eb'],
                            [1, '#f37886']
                          ]
                        }
                      },
                      pointer: {
                        width: 6,
                        itemStyle: {
                          color: '#3e78f5'
                        }
                      },
                      axisTick: {
                        distance: -8,
                        length: 16,
                        lineStyle: {
                          color: '#fff',
                          width: 1
                        }
                      },
                      splitLine: {
                        distance: -8,
                        length: 20,
                        lineStyle: {
                          color: '#fff',
                          width: 2
                        }
                      },
                      axisLabel: {
                        color: '#fff',
                        distance: 9,
                        fontSize: 10
                      },
                      detail: {
                        // width:60,
                        // height:60,
                        fontSize: 14,
                        valueAnimation: true,
                        formatter: '{value} r/min',
                        color: '#fff'
                      },
                      data: [
                        {
                          value: actualVelocity,
                          name: '运行速度',
                        }
                      ],
                      title: {
                        show: true,
                        fontSize: 14,
                        offsetCenter: ["0", "10%"],
                        color: '#fff'
                      },
                      max: 5000,
                      min: 0
                    }
                  ]
                }
            );
            window.addEventListener("resize", () => {
              if(myChart!=null)myChart.resize();
            })
          },1);

      }, //摄像头在线或离线状态
      HKonlines() {
        if (localStorage.getItem("video_ip1") != null
          && localStorage.getItem("video_ip1") != ""
          && localStorage.getItem("video_name1") != null
          && localStorage.getItem("video_name1") != ""
          && localStorage.getItem("video_pwd1") != null
          && localStorage.getItem("video_pwd1") != ""
          && localStorage.getItem("video_port1") != null
          && localStorage.getItem("video_port1") != ""
        ) {
          this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
          HKonline(this.queryparms4).then(response => {
            this.online = response.data[0].hKloginValue
            if (this.online != -1) {
              this.zxShow = true
              this.lxShow = false
            } else {
              this.zxShow = false
              this.lxShow = true
            }
          });
        } else {
          this.$modal.msg("海康摄像头账号为空")
          this.zxShow = false
          this.lxShow = true
        }
      },
      /////////////////////海康摄像头//////////////////
      //校时
      HKtiming() {
        HKtiming(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
          //console.log("88888",queryparms1)
        });
      },
      //水印
      HKwatermark() {
        this.queryparms4.valu = $("#sy").text()
        const value = this.queryparms4.valu
        if (value === '') {
          this.$modal.msg('摄像头水印不能为空')
        } else {
          HKwatermark(this.queryparms4).then(response => {
            if (typeof (response) != null) {
              this.$modal.msg(response.msg);
            }
          });
        }
      },
      //手动录像开始
      HKstartVideo() {
        HKstartVideo(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      },
      //手动录像停止
      HKendVideo() {
        HKendVideo().then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      },
      //拍照
      HKpicture() {
        HKpicture(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      },
      //云台向上点击
      startUp: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzUp(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {

            }
          });
        }
      }, 1000),
      //云台向上----长按
      startUp1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzUp1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
            //console.log("88888", queryparms1)
          });
        }, 500)
      },
      stopUp1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzUpEnd1(this.queryparms4).then(response => {

        });
      },
      //云台向下点击
      startDown: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台向下----长按
      startDown1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzDown1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopDown1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzDownEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向左点击
      startLeft: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzLeft(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {

            }
          });
        }
      }, 1000),
      //云台向左----长按
      startLeft1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzLeft1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopLeft1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzLeftEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向右点击
      startRight: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzRight(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {

            }
          });
        }
      }, 1000),
      //云台向右----长按
      startRight1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzRight1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopRight1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzRightEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向左上点击
      startUpLeft: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzLeftUp(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台向左上----长按
      startUpLeft1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzLeftUp1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopUpLeft1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzLeftUpEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向右上点击
      startUpRight: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzRightUp(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {

            }
          });
        }
      }, 1000),
      //云台向右上----长按
      startUpRight1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzRightUp1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopUpRight1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzRightUpEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向左下点击
      startDownLeft: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzLeftDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {

            }
          });
        }
      }, 1000),
      //云台向左下----长按
      startDownLeft1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzLeftDown1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopDownLeft1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzLeftDownEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向右下点击
      startDownRight: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzRightDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台向右下----长按
      startDownRight1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzRightDown1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopDownRight1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzRightDownEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变倍+点击
      startBBplus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKzoomAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }

      }, 1000),
      //云台变倍+  --  长按
      startBBplus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKzoomAdd1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopBBplus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKzoomAddEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变倍-点击
      startBBminus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKzoomDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }

      }, 1000),
      //云台变倍-  --  长按
      startBBminus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKzoomDec1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopBBminus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKzoomDecEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变焦+点击
      startBJplus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKfocusAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }

      }, 1000),
      //云台变焦+  --  长按
      startBJplus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKfocusAdd1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopBJplus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKfocusAddEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变焦-点击
      startBJminus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKfocusDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台变焦-  --  长按
      startBJminus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKfocusDec1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopBJminus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKfocusDecEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台光圈+ 点击
      startGQplus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKirisAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台光圈+ --  长按
      startGQplus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKirisAdd1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopGQplus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKirisAddEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台光圈- 点击
      startGQminus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKirisDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台光圈- --  长按
      startGQminus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKirisDec1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopGQminus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKirisDecEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
    },
    beforeDestroy() {
      //清除定时器
      if(myChart != null){myChart.clear();myChart = null;}
      if (this.timer) {
        clearInterval(this.timer); //关闭
      }
      if (this.timer1) {
        clearInterval(this.timer1); //关闭
      }
      if (this.webRtcServer != null) {
        this.webRtcServer.disconnect();
        this.webRtcServer = null
      }
      if (this.webRtcServer1 != null) {
        this.webRtcServer1.disconnect();
        this.webRtcServer1 = null
      }
    },enter() {
      this.isDologin = true;
    },leave() {
      this.isDologin = false;
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    width: 100%;
    height: calc(100vh - 40px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #011137 !important;
    //padding-left:0;
  }

  * {
    margin: 0;
    padding: 0;
  }

  .el-button+.el-button {
    margin-left: 0px;
  }

  //左边
  .left {
    width: 19%;
    height: 100%;
    display: flex;
    flex-direction: column;

    // justify-content: space-between;
    .put {
      width: 98%;
      margin: 10px;

      ::v-deep .el-input {
        width: 100%;
        height: 20px;
      }

      ::v-deep .el-input__inner {
        border: 2px solid #0264bf;
        background-color: #081a46;
        // margin: 10px;
      }
    }

    .table {
      width: 98%;
      height: 200px;
      margin: 10px;
      // margin-top: 20px;
      overflow: auto;

      ::v-deep .el-table__body-wrapper {
        &::-webkit-scrollbar {
          // 整个滚动条
          width: 0px; // 纵向滚动条的宽度
          background: rgba(71, 103, 182, 0.3);
          border: none;
        }

        &::-webkit-scrollbar-track {
          // 滚动条轨道
          border: none;
        }
      }

      .el-table {
        width: 100%;

      }

      ::v-deep .el-table th.gutter {
        display: none;
        width: 0
      }

      ::v-deep .el-table colgroup col[name='gutter'] {
        display: none;
        width: 0;
      }

      // ::deep .el-table::before {
      //     height: 0px;
      // }

      ::v-deep .el-table__body {
        width: 100%;
        // padding-left: 10px;
      }

      ::v-deep .el-table__body-wrapper {
        width: 100%;
        background-color: #081a46;
      }

      /*滚动条的宽度*/
      .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        display: none;
        width: 0;
      }

      .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        display: block;
        width: 0;
      }

      ::v-deep .el-table tr {
        background-color: transparent;
        border: none;
        // height: 50px;
        width: 100%;
        background-color: #081a46;
      }

      ::v-deep .el-table td {
        background-color: trannt;
        border: none;
        width: 100%;
        // height: 50px;
        background-color: #081a46;
      }

      // /* 表格内背景颜色 */
      ::v-deep .el-table th {
        background-color: transparent;
        border: none;
        width: 100%;
      }

      // 移入变色
      ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #222448;
      }
    }

    ::v-deep.el-progress-bar__inner {
      background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
    }

    .table::-webkit-scrollbar {
      display: none;
      /*隐藏滚动条*/
    }
  }

  //中间
  .video-center {
    width: 35%;
    height: 100%;
    margin-left: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #011137 !important;

    .center-box1 {
      width: 98%;
      height: 60%;
      background: #011137 !important;
      border: 1px solid #27306b;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .Speed-dial {
        width: 100%;
        height: 70%;
        display: flex;
        justify-content: center;
        align-items: center;

        >div {
          width: 98%;
          height: 100%;
          margin-top: 30px;
          //background-color: #00FF00;
        }
      }

      .right-mode {
        width: 88%;
        height: 30%;
        // margin-top: 2%;
        //background-color: #2ec7a1;
        // margin-bottom: -4%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .right-mode1 {
          width: 45%;
          height: 100%;
          //background-color: burlywood;
          display: flex;
          justify-content: center;
          align-items: center;

          :nth-child(1) {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 4px;
          }

          :nth-child(2) {
            width: 60px;
            height: 25px;
            background: #011137 !important;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .right-mode2 {
          width: 35%;
          height: 100%;
          //background-color: burlywood;
          display: flex;
          justify-content: center;
          align-items: center;

          :nth-child(1) {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 4px;
          }

          :nth-child(2) {
            width: 60px;
            height: 25px;
            background: #011137 !important;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }


        .right-mode3 {
          width: 35%;
          height: 100%;
          //background-color: burlywood;
          display: flex;
          justify-content: center;
          align-items: center;

          :nth-child(1) {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 4px;
          }

          :nth-child(2) {
            width: 60px;
            height: 25px;
            background: #011137 !important;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .right-mode4 {
          width: 45%;
          height: 100%;
          //background-color: burlywood;
          display: flex;
          justify-content: center;
          align-items: center;

          :nth-child(1) {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 4px;
          }

          :nth-child(2) {
            width: 60px;
            height: 25px;
            background: #011137 !important;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

      }

      .Mode-selection {
        width: 98%;
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 40px;

        p {
          width: 96px;
          height: 24px;
          font-size: 15px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }
      }

      .Operation-button {
        width: 80%;
        height: 18%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 7px;
        // margin-bottom: 1%;

        .Operation-buttonBox {
          width: 60px;
          height: 60px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          :nth-child(1) {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(68deg, #3040F4, #3F79F4);
            margin-bottom: 5px;
            border-width: 0px
          }

          :nth-child(2) {
            width: 60px;
            height: 16px;
            text-align: center;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
          }
        }
      }
    }

    //手动模式
    .center-box2-1 {
      width: 98%;
      height: 40%;
      background: #011137 !important;
      border: 1px solid #27306b;
      border-top: none;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .right-bottomTitle {
        width: 98%;
        height: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // background-color: #00FF00;

        >p {
          width: 95px;
          height: 22px;
          font-size: 15px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-left: 40px;
        }

        span {
          display: block;
          width: 50px;
          height: 2px;
          margin-left: 0.5%;
          background: #4691FF;
        }
      }

      .right-bottomBox {
        width: 98%;
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // background-color: #2ec7a1;

        .rightbox1 {
          width: 100%;
          height: 50%;
          //background-color: coral;
          display: flex;
          justify-content: center;
          align-items: center;

          >span {
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            margin-left: 5px;
          }

          .btn1 {
            width: 80px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            // margin-bottom: 10px;
            margin-left: 30px;
          }
        }

        .rightbox2 {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          //background-color: #9B6D2B;

          >span {
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            margin-left: 2px;
          }

          .btn2 {
            width: 80px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            margin-left: 16px;
          }
        }

      }

      .rightbox3 {
        width: 98%;
        height: 25%;
        display: flex;
        align-items: center;
        justify-content: center;

        //background-color: darkkhaki;
        .rightbox3-1 {
          width: 65%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          //background-color: #2ec7a1;
          .btn1 {
            width: 66px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }

          .btn2 {
            width: 66px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #065D70);
            border: 2px solid #108B8F;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            margin-left: 11px;
            margin-right: 11px;
          }

          .btn3 {
            width: 66px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #772006, #38270d);
            border: 2px solid #b11c0d;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }

          .btn4 {
            width: 66px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #4C0820, #0D1538);
            border: 2px solid #942028;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            margin-right: 11px;
          }
        }

      }
    }

    //自动模式
    .center-box2-2 {
      width: 98%;
      height: 40%;
      background: #011137 !important;
      border: 1px solid #2A2E4A;
      border-top: none;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      //justify-content: center;
      align-items: center;

      .right-bottomTitle {
        width: 98%;
        height: 20%;
        margin-top: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        //background-color: #00FF00;

        >p {
          width: 95px;
          height: 22px;
          font-size: 15px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-left: 42px;
        }

        span {
          display: block;
          width: 50px;
          height: 2px;
          margin-left: 1.5%;
          background: #4691FF;
        }
      }

      .right-bottomBox1 {
        width: 98%;
        height: 20%;
        //background-color: #108B8F;
        display: flex;
        align-items: center;
        justify-content: center;

        >span {
          margin-left: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        .btn {
          width: 80px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          margin-left: 20px;
        }
      }

      .right-bottomBox2 {
        width: 98%;
        height: 20%;
        //background-color: #2B5B9B;
        display: flex;
        justify-content: space-around;
        align-items: flex-end;

        .rightbox2-1 {
          width: 50%;
          height: 100%;
          display: flex;
          align-items: flex-end;
          justify-content: center;

          //background-color: blueviolet;
          .btn1 {
            width: 50px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }

          .btn2 {
            width: 50px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #065D70);
            border: 2px solid #108B8F;
            border-radius: 4px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            margin-left: 32px;
            margin-right: 32px;
          }

          .btn3 {
            width: 50px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #337F17);
            border: 2px solid #3CA813;
            border-radius: 4px;
            font-size: 12px;
            //margin-left: 8px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }
        }

      }
    }

    //一键返航
    .center-box2-3 {
      width: 98%;
      height: 40%;
      background: #011137 !important;
      border: 1px solid #2A2E4A;
      border-top: none;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .right-bottomTitle {
        width: 98%;
        height: 20%;
        margin-top: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        //background-color: #00FF00;

        >p {
          width: 95px;
          height: 22px;
          font-size: 15px;
          margin-left: 30px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;

        }

        span {
          display: block;
          width: 50px;
          height: 2px;
          //margin-left: 0.5%;
          background: #4691FF;
        }
      }

      .right-bottomBox {
        width: 50%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: flex-end;

        //background-color: #0264bf;
        .btn {
          width: 50px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          //margin-left: -5px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }
    }

  }


  //右边
  .video-right {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .right-header {
      width: 98%;
      height: 65px;
      margin-bottom: 8px;
      border: 1px solid #2A2E4A;
      border-top: none;
      border-radius: 0px 0px 4px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #081a46;

      p {
        width: 148px;
        height: 25px;
        line-height: 25px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #E9E9E9;
      }
    }

    .videoBox {
      width: 98%;
      height: 97.5%;
      display: flex;
      flex-direction: column;
      //justify-content: center;
      align-items: center;
      border: 1px solid #27306b;
      border-radius: 4px;
      background: #011137 !important;

      .videobox1 {
        width: 99.9%;
        height: 50%;
        display: flex;
        margin-bottom: 4px;

        .box {
          width: 50%;
          height: 100% !important;
          /*新增高度 2023-5-6*/
          display: flex;
          justify-content: center;
          align-items: center;
          background: #000000;
          border: 1px solid #2A2E4A;
          background-image: url(../../components/images/jiankong.png);
          background-repeat: no-repeat;
          background-position: center center;
          //隐藏video播放按钮
          /*.video::-webkit-media-controls-play-button{*/
          /*  display: none !important;*/
          /*}*/

        }

        .video-js {
          background-color: rgb(1 5 43);
          object-fit: fill;
          //隐藏video播放按钮
        }

        video {
          pointer-events: none;
        }

        //隐藏video播放按钮
        video::-webkit-media-controls-play-button {
          display: none !important;
        }

        //隐藏video音量进度条
        video::-webkit-media-controls-volume-slider {
          display: none !important;
        }

        //隐藏video音量按钮
        video::-webkit-media-controls-mute-button {
          display: none !important;
        }

        video::-webkit-media-controls-toggle-closed-captions-button {
          display: none !important;
        }

        //隐藏当前时间
        video::-webkit-media-controls-current-time-display {
          display: none !important;
        }

        //隐藏剩余时间
        video::-webkit-media-controls-time-remaining-display {
          display: none !important;
        }

        //隐藏进度条
        video::-webkit-media-controls-timeline {
          display: none !important;
        }

        //更多选项
        video::-internal-media-controls-overflow-button {
          display: none !important;
        }

        .active {
          border: 1px solid #00FF00;
        }
      }

      .videobox2 {
        width: 99%;
        height: 15%;
        display: flex;
        flex-direction: column;
        align-items: center;
        //margin-bottom: 3%;

        .videobox2-1 {
          width: 98%;
          height: 20%;
          margin-bottom: 2%;

          p {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #EDEDED;
            margin-left: 2%;
          }

          span {
            display: block;
            margin-left: 2.6%;
            width: 38px;
            height: 2px;
            background: #4691FF;
          }
        }

        .videobox2-2 {
          width: 98%;
          height: 80%;
          margin-bottom: 8px;
          display: flex;
          justify-content: center;

          .videobox2-2-1 {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .btn {
              width: 90px;
              height: 25px;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            >P {
              width: 90px;
              height: 25px;
              margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #0F1A43;
              border: 2px solid #54619D;
              border-radius: 10px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #C1C1C1;
            }
          }

          .videobox2-2-3 {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            //background-color: #00FF00;
            .btn1 {
              width: 90px;
              height: 25px;
              //margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #5f5e5e, #151515);
              border: 2px solid #716c6c;
              border-radius: 4px;
              font-size: 8px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              margin-bottom: 5%;
            }

            .btn2 {
              width: 90px;
              height: 25px;
              // margin-top: 27%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
            }

            .btn3 {
              width: 90px;
              height: 25px;
              // margin-top: 27%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
              margin-bottom: 5%;
            }
          }

          .videobox2-2-4 {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .btn1 {
              width: 90px;
              height: 25px;
              //margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
            }

            .btn2 {
              width: 90px;
              height: 25px;
              margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #673B1B);
              border: 2px solid #9B6D2B;
              border-radius: 4px;
            }
          }

        }
      }

      .videobox3 {
        width: 98%;
        height: 32%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2%;
        //background-color: #00FF00;


        .videobox3-1 {
          width: 98%;
          height: 10%;
          //background-color: #108B8F;

          p {
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #EDEDED;
            margin-left: 2%;
          }

          span {
            display: block;
            margin-left: 2.5%;
            width: 20px;
            height: 2px;
            background: #4691FF;
          }
        }

        .videobox3-2 {
          width: 98%;
          height: 90%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          //margin-top: 1%;
          //background-color: #0051ff;

          .ptz {
            position: relative;
            width: 264px;
            /* padding: 10px; */
            height: 200px;
            //background-color: aquamarine;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .circle-left {
            width: 73px;
            height: 146px;
            /* border: 1px solid #fff; */
            border-radius: 0px 73px 73px 0px;
            position: absolute;
            right: 0;
            transform-origin: 0 50%;
          }

          .circle-right {
            width: 73px;
            height: 146px;
            /* border: 1px solid #fff; */
            border-radius: 73px 0px 0px 73px;
            position: absolute;
            right: 0;
            transform-origin: 100% 50%;
          }

          /* 八等份分割线 */
          #Canvas {
            position: absolute;
            z-index: 1;
            pointer-events: none;
            left: 87px;
            top: 27px;
            transform: rotate(-22.5deg);
          }

          /* 外圆环 */
          #round {
            width: 160px;
            height: 160px;
            background-color: #011137;
            border-radius: 50%;
            position: absolute;
            left: 80px;
            top: 20px;
            z-index: 0;
          }

          /* 黑色内圆环 */
          #center_black {
            width: 74px;
            height: 74px;
            background-color: #011137;
            border-radius: 50%;
            position: absolute;
            left: 123px;
            top: 63px;
            z-index: 1;
          }

          /* 中心蓝色圆环 */
          #center_blue {
            width: 60px;
            height: 60px;
            text-align: center;
            background: linear-gradient(68deg, #3040F4, #3F79F4);
            border-radius: 50%;
            position: absolute;
            left: 130px;
            top: 70px;
            z-index: 2;
          }

          #center_blue span {
            position: absolute;
            left: 17px;
            top: 22px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          /* 圆八等份 */
          #circle0 {
            width: 146px;
            height: 146px;
            border-radius: 73px;
            top: 0px;
            background-color: #0f2140;
            position: absolute;
            left: 87px;
            top: 27px;
            z-index: 0;
            pointer-events: auto;
            transform: rotate(-22.5deg);
          }

          #left {
            /* 用矩形切割半圆 */
            clip: rect(0px 73px 146px 0px);
            position: absolute;
            right: 0px;
            width: 73px;
            height: 146px;
            overflow: hidden;
            border-left: 2px solid #011137;
          }

          #right {
            clip: rect(0px 78px 146px 0px);
            position: absolute;
            left: 0px;
            width: 73px;
            height: 146px;
            overflow: hidden;
            //border-right: 2px solid #011137;
          }

          #circle2:hover,
          #circle3:hover,
          #circle4:hover,
          #circle5:hover,
          #circle6:hover,
          #circle7:hover,
          #circle8:hover,
          #circle9:hover,
          #center_blue:hover {
            cursor: pointer;
          }

          #circle2 {
            background-color: #0a2056;
            //border-left: 2px solid #011137;
          }

          #circle2 span {
            position: absolute;
            left: 14px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle3 {
            background-color: #0a2056;
            transform: rotate(45deg);
            border-left: 2px solid #011137;
          }

          #circle3 span {
            position: absolute;
            left: 10px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle4 {
            background-color: #0a2056;
            transform: rotate(90deg);
            border-left: 2px solid #011137;
          }

          #circle4 span {
            position: absolute;
            left: 15px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle5 {
            background-color: #0a2056;
            transform: rotate(135deg);
            border-left: 2px solid #011137;
          }

          #circle5 span {
            position: absolute;
            left: 12px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle6 {
            background-color: #0a2056;
            transform: rotate(225deg);
            border-right: 2px solid #011137;
          }

          #circle6 span {
            position: absolute;
            right: 14px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle7 {
            background-color: #0a2056;
            transform: rotate(270deg);
            border-right: 2px solid #011137;
          }

          #circle7 span {
            position: absolute;
            right: 10px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle8 {
            background-color: #0a2056;
            transform: rotate(315deg);
            border-right: 2px solid #011137;
          }

          #circle8 span {
            position: absolute;
            right: 15px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle9 {
            background-color: #0a2056;
            transform: rotate(360deg);
          }

          #circle9 span {
            position: absolute;
            right: 10px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          .videobox3-3 {
            width: 30%;
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 1%;
            // margin-left: -20%;
            justify-content: space-around;

            // background-color: #00FF00;
            .videobox3-3-1 {
              width: 90%;
              display: flex;
              justify-content: space-around;
              align-items: center;

              .btn1 {
                width: 32px;
                height: 32px;
                background: linear-gradient(68deg, #3040F4, #3F79F4);
                border-radius: 50%;
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                cursor: pointer;
                margin-bottom: 4px;
              }

              p {
                width: 26px;
                height: 18px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                margin-bottom: 4px;
              }

              .btn2 {
                width: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 32px;
                background: linear-gradient(68deg, #3040F4, #3F79F4);
                border-radius: 50%;
                border: none;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                cursor: pointer;
                margin-bottom: 4px;
              }
            }
          }
        }
      }
    }
  }
</style>
